import React, {Component} from 'react';
import Video from 'react-native-video';
import WebView from 'react-native-webview';
import Orientation from 'react-native-orientation';
import {getShareNewsHtml} from '~/api/share';
import {Toast} from '@ant-design/react-native';
import {StyleSheet} from 'react-native';

export default class HVideo extends Component {
    static navigationOptions = ({navigation}) => {
        let is_portrait = true;
        let title = '视频';
        if (navigation.state.params) {
            if (navigation.state.params.isLandscape) {
                is_portrait = !navigation.state.params.isLandscape;
            }
            if (navigation.state.params.title) {
                title = navigation.state.params.title;
            }
        }
        return {
            title: title,
            headerShown: is_portrait,
        };
    };

    constructor(props) {
        super(props);
        this.state = {
            id: this.props.navigation.getParam('id') || 0,
            link: this.props.navigation.getParam('link') || '',
            title: this.props.navigation.getParam('title') || '',
            cover: this.props.navigation.getParam('cover') || '',
            html: '',
        };
        this.props.navigation.setParams({title: this.state.title});
        if (this.state.link === '') {
            getShareNewsHtml({
                id: this.state.id,
            }).then((r) => {
                if (r.code === 0) {
                    let title = r.data.title;
                    this.state.title = title;
                    this.props.navigation.setParams({title: this.state.title});
                    let html = r.data.html.replace(/<img[^>]*src="([^"]+)"[^>]*>/gi, '<img style="max-width: 100%" src="$1">');
                    html = `
<html>
<head>
<title>${title}</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<body>
${html}
</body>
</html>
                    `;
                    this.setState({
                        html: html,
                    });
                } else {
                    Toast.info('失败', 1);
                }
            });
        }
    }

    componentDidMount() {
        Orientation.getInitialOrientation();
        Orientation.addOrientationListener(this._orientationDidChange);
    }

    _orientationDidChange = (orientation) => {
        if (orientation === 'LANDSCAPE') {
            this.props.navigation.setParams({isLandscape: true});
        } else {
            this.props.navigation.setParams({isLandscape: false});
        }
    };

    componentWillUnmount() {
        Orientation.removeOrientationListener(this._orientationDidChange);
    }

    render() {
        return (
            <>
                {this.state.link !== '' && (
                    <Video source={{uri: this.state.link}} poster={this.state.cover} paused controls style={styles.body} resizeMode="contain" />
                )}
                {this.state.html !== '' && <WebView source={{html: this.state.html}} style={styles.body} />}
            </>
        );
    }
}

var styles = StyleSheet.create({
    body: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
});
